/**
* 功能描述：日期范围选择器
* @author jin xiaohang
*
* @date 2022/9/28 15:05
* @version 1.0
*/
<template>
    <div class="yw-date-range-picker">
        <div class="yw-date-range-picker-part yw-date-range-picker-part-left">
            <div class="yw-date-range-picker-input-wrap">
                <div class="yw-date-range-picker-date-input-wrap">
                    <input class="yw-date-range-input"  type="text" placeholder="请选择开始日期"/>
                </div>
            </div>
            <div class="yw-date-range-picker-date-panel">
                <div class="yw-date-range-picker-date-panel-header">
                    <div class="yw-date-range-picker-date-panel-header-wrap">
                        <a class="yw-date-range-picker-prev-year-btn" role="button" title="上一年 (Control键加左方向键)"></a>
                        <a class="yw-date-range-picker-prev-month-btn" role="button" title="上个月 (翻页上键)"></a>
                        <span class="yw-date-range-picker-select">
                            <a class="yw-date-range-picker-year-select">2022年</a>
                            <a class="yw-date-range-picker-month-select">9月</a>
                        </span>
                    </div>
                </div>
                <div class="yw-date-range-picker-date-panel-body">
                    <table class="yw-date-range-picker-date-panel-table">
                        <thead>
                        <tr>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">一</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">二</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">三</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">四</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">五</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">六</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">七</span>
                            </th>
                        </tr>
                        </thead>
                        <tbody class="yw-date-range-picker-table-body">
                        <tr>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">26</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">27</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">28</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">29</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">30</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">31</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">1</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">2</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">3</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">4</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">5</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">6</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">7</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">8</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">9</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">10</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">11</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">12</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">13</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">14</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">15</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">16</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">17</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">18</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">19</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">20</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">21</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">22</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-selected-cell">
                                <div class="yw-data-picker-table-data">23</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">24</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">25</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">26</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">27</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">28</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">29</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">30</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">31</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-next-month-cell">
                                <div class="yw-data-picker-table-data">1</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-next-month-cell">
                                <div class="yw-data-picker-table-data">2</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-next-month-cell">
                                <div class="yw-data-picker-table-data">3</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-next-month-cell">
                                <div class="yw-data-picker-table-data">4</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-next-month-cell">
                                <div class="yw-data-picker-table-data">5</div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <span class="yw-date-range-picker-middle">~</span>
        <div class="yw-date-range-picker-part yw-date-range-picker-part-right">
            <div class="yw-date-range-picker-input-wrap">
                <div class="yw-date-range-picker-date-input-wrap">
                    <input class="yw-date-range-input"  type="text" placeholder="请选择结束日期"/>
                </div>
            </div>
            <div class="yw-date-range-picker-date-panel">
                <div class="yw-date-range-picker-date-panel-header">
                    <div class="yw-date-range-picker-date-panel-header-wrap">
                        <span class="yw-date-range-picker-select">
                            <a class="yw-date-range-picker-year-select">2022年</a>
                            <a class="yw-date-range-picker-month-select">10月</a>
                        </span>
                        <a class="yw-date-range-picker-next-month-btn" role="button" title="下个月 (翻页下键)"></a>
                        <a class="yw-date-range-picker-next-year-btn" role="button" title="下一年 (Control键加右方向键)"></a>
                    </div>
                </div>
                <div class="yw-date-range-picker-date-panel-body">
                    <table class="yw-date-range-picker-date-panel-table">
                        <thead>
                        <tr>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">一</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">二</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">三</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">四</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">五</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">六</span>
                            </th>
                            <th class="yw-date-range-picker-date-panel-table-header">
                                <span class="yw-date-range-picker-date-panel-table-header-inner">七</span>
                            </th>
                        </tr>
                        </thead>
                        <tbody class="yw-date-range-picker-table-body">
                        <tr>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">26</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">27</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">28</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">29</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">30</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-last-month-cell">
                                <div class="yw-data-picker-table-data">31</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">1</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">2</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">3</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">4</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">5</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">6</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">7</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">8</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">9</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">10</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">11</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">12</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">13</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">14</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">15</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">16</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">17</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">18</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">19</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">20</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">21</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">22</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-selected-cell">
                                <div class="yw-data-picker-table-data">23</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">24</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">25</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">26</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">27</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">28</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">29</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">30</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell">
                                <div class="yw-data-picker-table-data">31</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-next-month-cell">
                                <div class="yw-data-picker-table-data">1</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-next-month-cell">
                                <div class="yw-data-picker-table-data">2</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-next-month-cell">
                                <div class="yw-data-picker-table-data">3</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-next-month-cell">
                                <div class="yw-data-picker-table-data">4</div>
                            </td>
                            <td class="yw-date-range-picker-table-cell yw-date-range-picker-table-next-month-cell">
                                <div class="yw-data-picker-table-data">5</div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</template>

<script>

export default {
    name: "YwDateRangePicker",
}
</script>

<style scoped>

</style>